<template>
  <div>
    <button @click="goHome" class="goHome">返回首页</button>
    <h1>详情组件</h1>
    <h1>{{ $route.params.id }}</h1>
    <h1>{{ result.name }}</h1>
    <h1>{{ detail.hobby }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentDetail: [
        {
          id: "01",
          name: "洋洋",
          detail: {
            height1: "180cm",
            age1: 19,
            hobby: "肤白貌美大长腿",
          },
        },
        {
          id: "02",
          name: "chaochao",
          detail: {
            height1: "177cm",
            age1: 22,
            hobby: "爱王洋洋",
          },
        },
        {
          id: "03",
          name: "jianing",
          detail: {
            height1: "160cm",
            age: 18,
            hobby: "面膜",
          },
        },
      ],
      result: {},
      detail: {},
    };
  },
  mounted() {
    //   在挂载当中进行首次渲染
    // 从studentdetail中查找学号为$route.query.id的值
    // 本质 数组当中查找符合条件的某些
    // find
    console.log(this.studentDetail);

    // 由于mounted只挂载一次 不能及时更新数据
    // $route.query.id是不断发生变化的，一点击就变
    // 思路：当$route.query.id发生变化触发更新操作
    this.showItem(this.$route);
  },
  watch: {
    $route(value) {
      console.log(value);
      /*  this.result = this.studentDetail.find((item) => {
        return item.id == value.query.id;
      }); */
      this.showItem(value);
    },
  },
  methods: {
    showItem(value) {
      this.result = this.studentDetail.find((item) => {
        return item.id == value.params.id;
      });
      //   console.log(this.result);
      this.detail = this.result.detail;
    },
    goHome() {
      console.log(this.$router);
      this.$router.back();
    },
  },
};

/* 
编程式路由导航  利用的就是history对象
go  back forward
pushState replaceState

this.$router.back()   返回上一级
this.$router.forward()  下一级
this.$router.go()  整数  下一级  负数 返回上一级
this.$router.push() 在历史记录当中插入某个路径 能返回
this.$router.replace() 替换当前的历史记录 不能返回




*/
</script>

<style lang="scss" scoped>
.goHome {
  width: 250px;
  height: 100px;
  font-size: 50px;
}
</style>